<template>
  <div class="app-container">
    <div class="header">
      <el-input
        v-model="inputValue"
        style="width: 200px;margin-right: 20px"
        placeholder="发布人/手机号"
      ></el-input>
      <!--      发布时间-->
      <span style="font-weight: bold;margin-right: 20px">发布时间</span>
      <el-date-picker
        style="margin-right: 20px"
        v-model="value1"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button style="margin-right: 20px" type="primary" @click="handleQuery"
        >搜索</el-button
      >
      <!--      排列方式-->
      <span style="margin-right: 20px;font-weight: bold">排列方式</span>
      <el-select
        v-model="selcetValue"
        placeholder="请选择"
        @change="orderChange"
      >
        <el-option
          v-for="item in orderData"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="headerItem">
      <!--      删除按钮-->
      <el-button type="danger" @click="handleDelete">删除</el-button>
      <el-input
        v-model="topicValue"
        style="width: 155px;margin: 0 40px"
        placeholder="话题"
        @change="searchChange"
      ></el-input>
      <el-input
        v-model="contentValue"
        style="width: 155px"
        placeholder="内容"
        @change="searchChange"
      ></el-input>
    </div>
    <!--    表格区域-->
    <el-table
      :header-cell-style="{
        textAlign: 'center',
        fontSize: '18px',
        fontWeight: 'bold',
        borderBottom: '1px #ccc solid',
        background: '#fff'
      }"
      :cell-style="{ textAlign: 'center' }"
      ref="multipleTable"
      :data="CompassDiaryList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="compassNormalUser.nickName" label="发布人">
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间"> </el-table-column>
      <el-table-column prop="diaryDesc" label="发布内容" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="diaryType" label="话题" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="weights" label="权重值" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.weights"
            @change="updateWeights(scope.row)"
            value="weightValue"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="likeNum" label="点赞数" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="commentNum" label="评论数" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="accessNum" label="热度">
        <template slot-scope="scope">
          <el-input
            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
            v-model="scope.row.accessNum"
            @change="updateHot(scope.row)"
            value="hotValue"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: red"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:CompassDiary:remove']"
            >删除</el-button
          >
          <el-button
            type="text"
            style="color: #178FFE"
            @click="toDetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改家长圈日记管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="评论数" prop="commentNum">
          <el-input v-model="form.commentNum" placeholder="请输入评论数" />
        </el-form-item>
        <el-form-item label="日记话题" prop="diaryType">
          <el-input v-model="form.diaryType" placeholder="请输入日记话题" />
        </el-form-item>
        <el-form-item label="有效状态-1 删除 1、有效" prop="disableFlag">
          <el-input
            v-model="form.disableFlag"
            placeholder="请输入有效状态-1 删除 1、有效"
          />
        </el-form-item>
        <el-form-item label="点赞数" prop="likeNum">
          <el-input v-model="form.likeNum" placeholder="请输入点赞数" />
        </el-form-item>
        <el-form-item label="发布人ID" prop="uId">
          <el-input v-model="form.uId" placeholder="请输入发布人ID" />
        </el-form-item>
        <el-form-item label="权重值" prop="weights">
          <el-input v-model="form.weights" placeholder="请输入权重值" />
        </el-form-item>
        <el-form-item label="日记内容" prop="diaryDesc">
          <el-input v-model="form.diaryDesc" placeholder="请输入日记内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listCompassDiary,
  getCompassDiary,
  delCompassDiary,
  addCompassDiary,
  updateCompassDiary,
  exportCompassDiary,
  updateWeights
} from "@/api/system/CompassDiary";
import { updateHots } from "../../../../api/system/CompassDiary";

export default {
  name: "CompassDiary",
  data() {
    return {
      //查询参数
      //权重值
      weightValue: "",
      //下拉框内容
      value1: "",
      //内容
      contentValue: "",
      //话题输入框
      topicValue: "",
      tableData: [],
      selcetValue: "最新",
      //排序方式
      orderData: [
        {
          value: 1,
          label: "最新"
        },
        {
          value: 2,
          label: "推荐"
        }
      ],
      //输入框数据
      inputValue: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 家长圈日记管理表格数据
      CompassDiaryList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: "",
        endTime: "",
        diaryDesc: "",
        orderType: 1,
        diaryType: "",
        userNameOrPhone: ""
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      userInfo: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //组装查询参数
    getQueryParams() {
      if (this.value1 != null && this.value1.length > 0) {
        //给查询条件开始时间赋值
        this.queryParams.startTime = this.value1[0];
        //给查询条件结束时间赋值
        this.queryParams.endTime = this.value1[1];
      } else {
        //给查询条件开始时间赋值
        this.queryParams.startTime = "";
        //给查询条件结束时间赋值
        this.queryParams.endTime = "";
        this.queryParams.userNameOrPhone = "";
      }
      //给查询条件输入框赋值
      this.queryParams.userNameOrPhone = this.inputValue;
      //给查询条件状态赋值
      this.queryParams.orderType = this.selcetValue;
      this.queryParams.diaryType = this.topicValue;
      this.queryParams.diaryDesc = this.contentValue;
      if (this.queryParams.orderType === "最新") {
        //当查询条件为全部的时候，查询状态赋值为空
        this.queryParams.orderType = 1;
      } else {
        this.getQueryParams.orderType = 2;
      }
    },
    //输入框搜索功能
    searchChange() {
      this.getQueryParams();
      listCompassDiary(this.queryParams).then(res => {
        this.CompassDiaryList = res.rows;
      });
    },
    //获取下拉框选中值
    orderChange() {
      this.getQueryParams();
      listCompassDiary(this.queryParams).then(res => {
        this.CompassDiaryList = res.rows;
      });
    },
    //修改权重
    updateWeights(row) {
      const id = row.id || this.ids;
      updateWeights(id, row.weights).then(res => {
        this.$message.success("修改成功");
        this.getList();
      });
    },
    // 修改热度
    updateHot(row) {
      const id = row.id || this.ids;
      updateHots(id, row.accessNum).then(res => {
        this.$message.success("修改成功");
        this.getList();
      });
    },
    //跳转到详情页
    toDetail(row) {
      this.$router.push({
        name: "diaryDetail",
        query: {
          id: row.id
        }
      });
    },
    /** 查询家长圈日记管理列表 */
    getList() {
      this.getQueryParams();
      listCompassDiary(this.queryParams).then(response => {
        this.CompassDiaryList = response.rows;
        this.userInfo = response.rows.compassNormalUser;
        this.total = response.total;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        commentNum: null,
        diaryType: null,
        disableFlag: null,
        likeNum: null,
        uId: null,
        weights: null,
        diaryDesc: null,
        createTime: null,
        updateTime: null
      };
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getQueryParams();
      listCompassDiary(this.queryParams).then(res => {
        this.total = res.total;
        this.CompassDiaryList = res.rows;
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加家长圈日记管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getCompassDiary(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改家长圈日记管理";
      });
    },
    //跳转到个人详情页
    toUserInfo() {
      // const id=row.id
      const uid = this.userId;
      console.log(uid);
      this.$router.push({
        name: "UserDetail",
        query: {
          id: uid
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCompassDiary(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addCompassDiary(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm(
        '是否确认删除家长圈日记管理编号为"' + ids + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(function() {
          return delCompassDiary(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有家长圈日记管理数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportCompassDiary(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        })
        .catch(function() {});
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  margin: 20px 0;
  font-size: 14px;

  .select {
    margin: 0 20px;

    span {
      font-size: 14px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
}
.headerItem {
  margin-bottom: 40px;
}
</style>
